<template>
  <div class="app-container app-container-iframe">
    <div class="iframe" ref="box" v-loading="!pload"></div>
    <div class="tabs">
      <el-button @click="handleCode" icon="el-icon-tickets" type="success" size="small">修改源码</el-button>
    </div>
    <editSet v-if="editSet" :data="params"></editSet>
    <edit v-if="edit" :data="selectTable" @setData="getData" look></edit>
  </div>
</template>

<script>
import * as api from '@/utils/api'
export default {
  components: {
    editSet: () => import('./edit'),
    edit: () => import('../sysTpl/edit')
  },
  data() {
    return {
      lookObj: null,
      edit: false,
      params: null,
      pload: false,
      editSet: false
    }
  },
  created() {
    if (this.$store.state.look.lookObj) {
      this.lookObj = this.$store.state.look.lookObj
    } else {
      this.$alert('请在模板管理中点击"可视化"按钮进入', {
        center: true
      }).then(() => {
        this.$router.push('/sysTpl/index')
      })
    }
  },
  watch: {
    lookObj(n) {
      console.log(n)
      this.$store.dispatch('setLookObj', n)
      this.getData()
    }
  },
  methods: {
    handleCode() {
      this.selectTable = {
        method: 'edit',
        templetId: this.lookObj.templetId
      }
      this.edit = true
    },
    async getData() {
      this.pload = false
      const Datas = await api.templetLook({
        templteId: this.lookObj.templetId,
        status: this.lookObj.status
      })
      console.log(Datas, 3333333)
      const hasClass = (elem, cls) => {
        cls = cls || ''
        if (cls.replace(/\s/g, '').length === 0) return false // 当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ')
      }

      const addClass = (elem, cls) => {
        if (!hasClass(elem, cls)) {
          elem.className = elem.className === '' ? cls : elem.className + ' ' + cls
        }
      }

      const uuid = /<!--uuid:(.+)-->/i.exec(Datas)[1]
      console.log(uuid)
      const getCommentNodes = e => {
        if (e.nodeType === 8) {
          if (/^.*_HXKJTAGS_(?:cms|m_cms)_.+$/.test(e.textContent)) {
            const dom = e.nextElementSibling
            if (dom) {
              const text = /^.*_HXKJTAGS_((?:cms|m_cms)_[^\s]+).+$/.exec(e.textContent)[1]
              let params = /^.*_HXKJTAGS_(?:cms|m_cms)_[^\s]+\s+(.+)$/.exec(e.textContent)[1]
              const param = {
                uuid: uuid,
                templteId: this.lookObj.templetId,
                taglibName: text
              }
              console.log(params)
              if (params) {
                params = params.split('|')
                for (let i = 0; i < params.length - 1; i++) {
                  const _p = params[i].split(':')
                  param[_p[0]] = _p[1]
                }
                param.tagname = param.taglibName + '  #' + param.num
              }
              // console.log(dom)
              dom.onclick = () => {
                this.params = param
                this.editSet = true
              }
              addClass(dom, 'lookParent')
              const tag = document.createElement('s')
              tag.innerHTML = param.tagname
              dom.appendChild(tag)
            }
          }
        } else if (e.nodeType === 1 || e.nodeType === 9) {
          const s = e.childNodes
          for (let i = 0; i < s.length; i++) {
            getCommentNodes(s[i])
          }
        }
      }
      const blob = new Blob([Datas], {
        'type': 'text/html'
      })
      const iframe = document.createElement('iframe')
      iframe.src = URL.createObjectURL(blob)
      iframe.onload = () => {
        const dom = iframe.contentWindow.document
        const style = document.createElement('style')
        style.innerHTML = `
          .lookParent {
            position: relative;
            min-height: 32px;
          }
          .lookParent:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background:#e6a23c;
            cursor: pointer;
            opacity: 0.15;
            transition: opacity 0.3s ease;
          }
          .lookParent:hover:after {
            opacity: 0.4;
          }
          .lookParent > s {
            position: absolute;
            color: #fff;
            background: #f00;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            border-radius: 2px;
            padding: 1px 3px;
            line-height: 1;
            font-size: 11px;
            text-decoration: none;
          }
        `
        dom.body.appendChild(style)
        getCommentNodes(dom)
      }
      this.$refs.box.innerHTML = ''
      this.$refs.box.appendChild(iframe)
      this.pload = true
    }
  }
}
</script>

<style lang="scss">
.app-container-iframe {
  height: 100%;
  padding: 0;
  position: relative;
  .tabs {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .iframe {
    height: 100%;
    overflow: hidden;
    iframe {
      border: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>